<template>
  <div class="searchStock" @mouseleave="reset">
    <div class="searchStock-line">
      <input type="text" placeholder="股票代码/名称/首字母" v-model="name" />
    </div>
    <div class="stockList-items top" v-show="listShow">
      <div
        class="stockList-item clear"
        v-for="item in list"
        :key="item.stockName"
        @click="choose(item.stockCode + item.stockName)"
      >
        <span class="cell cell1" v-text="item.hqTypeLabel"></span>
        <span class="cell" v-text="item.stockCode"></span>
        <span class="cell" v-text="item.stockName"></span>
        <span class="cell cell4" v-text="item.chiSpelling"></span>
      </div>
    </div>
  </div>
</template>
<script>
import debounce from "lodash/debounce";
import { getStockList } from "../api/index";
export default {
  data() {
    return {
      list: [],
      listShow: false,
      name: "",
    };
  },
  watch: {
    name: debounce(async function () {
      if (this.name.length > 0) {
        await getStockList({ name: this.name }).then((back) => {
          if (back.status == 1) {
            let res = back.data;
            if (res.data.rows.length > 0) {
              this.list = res.data.rows;
              this.listShow = true;
            }
          }
        });
      }
    }, 1000),
  },
  methods: {
    choose(message) {
      this.$emit("chooseStock", message);
      this.reset();
    },
    reset() {
      this.listShow = false;
      this.name = "";
      this.list = [];
    },
  },
  async mounted() {},
};
</script>
